<template>
    <div class="home">
        <!-- 头 -->
        <div class="header">
            京西商城 - 首页

        </div>
        <!-- 轮播图 -->
        <div class="lbt">
            <!-- <img src="@/assets/imgs/swiper1.jpg" /> -->
            <swiper :options="swiperOption" ref="mySwiper">
                <!-- slides -->
                <swiper-slide><img src="@/assets/imgs/swiper1.jpg" /></swiper-slide>
                <swiper-slide><img src="@/assets/imgs/swiper1.jpg" /></swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination" slot="pagination"></div>
                <!-- <div class="swiper-button-prev" slot="button-prev"></div>
                <div class="swiper-button-next" slot="button-next"></div> -->
                <div class="swiper-scrollbar" slot="scrollbar"></div>
            </swiper>
        </div>
        <!-- 宫格 -->
        <div class="navs">
            <div class="nav">
                <img src="@/assets/imgs/icon-qiandao.png">
                <span>签到</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-fujin.png">
                <span>附近</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-zhanhui.png">
                <span>游展</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-fuli.png">
                <span>福利</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-muma.png">
                <span>玩乐</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-xingxing.png">
                <span>周边</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-tiyu.png">
                <span>体育</span>
            </div>
            <div class="nav">
                <img src="@/assets/imgs/icon-qinzi.png">
                <span>亲子</span>
            </div>
        </div>

        <div class="hotGoods">
            <div class="tit">热卖商品</div>
            <div class="main">
                <div class="goods">
                    <div class="l">
                        <img src="@/assets/imgs/zhutu.jpg">
                    </div>
                    <div class="r">
                        <div class="name">木村耀司登山旅行大学生户外情侣双肩背包外带小背包</div>
                        <div class="address">诸暨</div>
                        <div class="price">￥160:00</div>
                    </div>
                    <img class="cart" src="@/assets/imgs/car.png">
                </div>
                <div class="goods">
                    <div class="l">
                        <img src="@/assets/imgs/zhutu.jpg">
                    </div>
                    <div class="r">
                        <div class="name">木村耀司登山旅行大学生户外情侣双肩背包外带小背包</div>
                        <div class="address">诸暨</div>
                        <div class="price">￥160:00</div>
                    </div>
                    <img class="cart" src="@/assets/imgs/car.png">
                </div>
                <div class="goods">
                    <div class="l">
                        <img src="@/assets/imgs/zhutu.jpg">
                    </div>
                    <div class="r">
                        <div class="name">木村耀司登山旅行大学生户外情侣双肩背包外带小背包</div>
                        <div class="address">诸暨</div>
                        <div class="price">￥160:00</div>
                    </div>
                    <img class="cart" src="@/assets/imgs/car.png">
                </div>
                <div class="goods">
                    <div class="l">
                        <img src="@/assets/imgs/zhutu.jpg">
                    </div>
                    <div class="r">
                        <div class="name">木村耀司登山旅行大学生户外情侣双肩背包外带小背包</div>
                        <div class="address">诸暨</div>
                        <div class="price">￥160:00</div>
                    </div>
                    <img class="cart" src="@/assets/imgs/car.png">
                </div>
                <div class="goods">
                    <div class="l">
                        <img src="@/assets/imgs/zhutu.jpg">
                    </div>
                    <div class="r">
                        <div class="name">木村耀司登山旅行大学生户外情侣双肩背包外带小背包</div>
                        <div class="address">诸暨</div>
                        <div class="price">￥160:00</div>
                    </div>
                    <img class="cart" src="@/assets/imgs/car.png">
                </div>

            </div>

        </div>

           <div class="footer">
            <ul>
                <li>
                    <img src="@/assets/imgs/shouye.png">
                    <span>首页</span>
                </li>
                <li>
                    <img src="@/assets/imgs/huodong.png">
                    <span>活动</span>
                </li>
                <li>
                    <img src="@/assets/imgs/car.png">
                    <span>购物车</span>
                </li>
                <li>
                    <img src="@/assets/imgs/my.png">
                    <span>我的</span>
                </li>
            </ul>
        </div>

    </div>
</template>
<script>
//导入组件、
export default {

    data () {
        return {
            swiperOption: {
                swiperOption: {
                    // 参数选项,显示小点
                    pagination: '.swiper-pagination',
                    //循环
                    loop: true,
                    //每张播放时长3秒，自动播放
                    autoplay: 2000,
                    //滑动速度
                    speed: 800,
                    // delay:1000  
                }
            }


        }
    },
    computed: {
        swiper () {
            return this.$refs.mySwiper.swiper
        }
    },
    mounted () {
        // current swiper instance
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        this.swiper.slideTo(6, 30000, true)
    }



}
</script>
<style scoped lang="scss">
@import "@/assets/css/common.scss";
.home {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .header {
        width: 100%;
        height: px2rem(42);
        line-height: px2rem(42);
        text-align: center;
        color: #fff;
        font-weight: bold;
        background: #69c3aa;
    }

    .lbt {
        width: 100%;
        height: px2rem(150);
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .navs {
        width: 100%;
        height: px2rem(174);
        display: flex;
        flex-wrap: wrap;

        .nav {
            width: 25%;
            height: px2rem(87);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            span {
                margin-top: px2rem(10);
            }
            img {
                width: px2rem(40);
                height: px2rem(40);
            }
        }
    }

    .hotGoods {
        width: 100%;
        min-height: px2rem(100);
        overflow: hidden;

        .tit {
            padding-left: px2rem(10);
            border: solid px2rem(1) #ccc;
        }

        .main {
            padding: 0 px2rem(10);

            .goods {
                display: flex;
                padding: px2rem(10) px2rem(10);
                border: solid px2rem(1) #ccc;
                position: relative;
                .cart {
                    width: px2rem(25);
                    height: px2rem(25);
                    position: absolute;
                    right: px2rem(10);
                    bottom: px2rem(10);
                }
                .l {
                    width: px2rem(80);
                    height: px2rem(80);
                    img {
                        width: 100%;
                        height: 100%;
                    }
                    .r {
                        flex: 1;
                    }
                }
            }
        }
    }

    .footer {
        width: 100%;
        height: px2rem(55);
        border-top: solid px2rem(1) #ccc;
        position: fixed;
        bottom: 0px;
        background: #fff;

        ul {
            list-style: none;
            width: 100%;
            height: 100%;

            li {
                width: 25%;
                height: 100%;
                float: left;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                img {
                    width: px2rem(22);
                    height: px2rem(22);
                }
            }
        }
    }
}
</style>